<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>网页换肤</title>
    <style>
    body,
    ul,
    li {
        margin: 0;
        padding: 0;
    }
    
    html,
    body {
        height: 100%;
    }
    
    body {
        font: 12px/1.5 Tahoma;
    }
    
    li {
        list-style-type: none;
    }
    
    a:link,
    a:visited {
        text-decoration: none;
    }
    
    a:hover {
        text-decoration: underline;
    }
    
    #outer {
        width: 500px;
        margin: 0 auto;
        overflow: hidden;
        zoom: 1;
    }
    
    #skin,
    #nav {
        overflow: hidden;
        zoom: 1;
    }
    
    #skin {
        margin: 10px 0;
    }
    
    #skin li {
        float: left;
        width: 6px;
        height: 6px;
        cursor: pointer;
        overflow: hidden;
        margin-right: 10px;
        text-indent: -9999px;
        border-width: 4px;
        border-style: solid;
    }
    
    #skin li.current {
        background: #fff!important;
    }
    
    #red {
        border-color: red;
        background: red;
    }
    
    #green {
        border-color: green;
        background: green;
    }
    
    #black {
        border-color: black;
        background: black;
    }
    
    #nav {
        border: 1px solid #fff;
    }
    
    #nav li {
        float: left;
        width: 82px;
        line-height: 25px;
        text-align: center;
        border-right: 1px solid #fff;
    }
    
    #nav li.last {
        width: 83px;
        border-right-width: 0;
    }
    
    #nav li a {
        color: #fff;
    }
    </style>
    <link href="../../../src/css/green.css" rel="stylesheet" type="text/css" />
    <script>
    window.onload = function() {
        var oLink = document.getElementsByTagName("link")[0];
        var oSkin = document.getElementById("skin").getElementsByTagName("li");

        for (var i = 0; i < oSkin.length; i++) {
            oSkin[i].onclick = function() {
                for (var p in oSkin) oSkin[p].className = "";
                this.className = "current";
                oLink['href'] ='../../../src/css/' + this.id + ".css";
            }
        }

    };
    </script>
</head>

<body>
    <div id="outer">
        <ul id="skin">
            <li id="red" title="红色">红</li>
            <li id="green" class="current" title="绿色">绿</li>
            <li id="black" title="黑色">黑</li>
        </ul>
        <ul id="nav">
            <li><a href="javascript:;">新闻</a></li>
            <li><a href="javascript:;">娱乐</a></li>
            <li><a href="javascript:;">体育</a></li>
            <li><a href="javascript:;">电影</a></li>
            <li><a href="javascript:;">音乐</a></li>
            <li class="last"><a href="javascript:;">旅游</a></li>
        </ul>
    </div>
</body>

</html>
